<html>
<head>
<style>

	.stuff
	{
		background:red;
		width:70dip;
		height:70dip;
	}
	.stuff > * {margin:5dip; background:blue; height:*; color:white;}
  .stuff[selected] { background:gold; } // it is covered by the box
	
  div#sandbox
  {
    border:1dip dashed silver;
    padding:4dip;
    border-spacing:4dip;
    flow:h-flow;
    height:*;
    
    aspect:RectTracker; 
  }
</style>

<script type="text/tiscript">

  include "rect-tracker.tis";

  const sandbox = self.$(div#sandbox);
	function createSomeStuff()
	{
		sandbox.$append(
      <div.stuff>
          <div>1</div>
          <div>2</div>
          <div>3</div>
      </div>
    );
	}

  self.ready = function()
    {
			for(var n = 0; n < 20; n++)
			  createSomeStuff();
    }

</script>
</head>
<body>
  <p>Demonstrates rect tracking. Press and drag mouse inside the area:</p>
  <div #sandbox />
</body>
</html>
